<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getListSpecial"
        uniqueId="wmsOutTaskTable"
      >
      </ele-page>
    </div>
    <el-dialog title="图片"
               :visible.sync="dialogVisible"
               width="80%"
               :append-to-body="true"
               v-loading="isLoading"
               :close-on-click-modal="false">
      <div
        class="item"
        v-for="(item, key) in imgUrlList"
        :key="key"
      >
        <el-image
          style="width: 100px; height: 100px"
          :src="item"
          :preview-src-list="imgUrlList">
        </el-image>
        <!--        <el-image-->
        <!--          :src="item"-->
        <!--        ></el-image>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { operateList, searchConfig, rowConfig,rowCenConfig} from './config'
import {
  getListSpecial,
  agreeOut,
} from '@/api/outbound/wmsOutTask'
import { goodsDialog } from './mixinGoods'
import {getDict} from "@/api/common";
import {quoteConfirmUpdate} from "@/api/quote/order";
import {mesTmMaterialOrderPickingBatchPc} from "@/api/materials/tmMaterialOrder";
const orderTypeMap = {
  0: "summaryOrderNo", //汇总单号
  1: "orderNo", //出库单号
  2: "upstreamOrderNo", //上游单号
};
export default {
  name: 'wmsOutTask',
  mixins: [goodsDialog],
  props: {
    typeInto: {
      type: Number | String,
      default: 0
    }
  },
  data() {
    const _this = this
    return {
      dialogVisible:false,
      imgUrlList:[],
      title: null,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      formPrintDialog: {},
      printVisible: false,
      printRow: {},
      searchConfig,
      operateList,
      getListSpecial,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        // {
        //   prop: 'vinCode',
        //   label: "vin编码",
        //   width: 160,fixed: 'left'
        // },
        // {
        //   prop: 'uwbCode',
        //   label: "uwb编码",
        //   width: 100
        // },
        // {
        //   prop: 'orderCode',
        //   label: "车辆订单编码",
        //   width: 140
        // },
        // {
        //   prop: 'modelName',
        //   label: "车型",
        //   width: 280
        // },
        {
          prop: "taskType",
          label: "出库类型",
          width: 80,
          render: (h, scope) => {
            let status = ''
            switch (scope.row.taskType) {
              case '1':
              // status = 24
              // break
              case '2':
                status = '普通出库'
                break
              case '3':
                status = '特殊出库'
                break
              case '4':
                status = '盘亏出库'
                break
            }
            return <div>{status}</div>
          },
        },
        {
          prop: 'goodsCode',
          label: "物料编码",
          width: 110
        },
        {
          prop: 'goodsName',
          label: "物料名称",
          showOverflowTooltip: true,
          width: 140
        },
        {
          prop: 'brand',
          label: "物料品牌",
          showOverflowTooltip: true,
          width: 140
        },
        {
          prop: 'unit',
          label: "物料规格",
          showOverflowTooltip: true,
          width: 100
        },
        {
          prop: 'outAmount',
          label: "物料需求数量",
          showOverflowTooltip: true,
          width: 140
        },
        {
          prop: 'countUnitShow',
          label: "领用单位",
          showOverflowTooltip: true,
          width: 140
        },
        // {
        //   prop: 'outPhotoUrl',
        //   label: "物料交接图片",
        //   width: 140,
        //   render: (h, scope) => {
        //     return <ele-row-operation scope={scope} rowConfig={rowCenConfig} onRowOperate={this.rowOperate}></ele-row-operation>
        //   }
        // },
        {
          prop: 'outState',
          label: "状态",
          width: 140,
          render: (h, scope) => {
            const status = scope.row.outState == '0' ? "申请出库": scope.row.outState == '1' ? "已出库":"交接完成"
            return <el-tag type={scope.row.outState == '0' ?'info':'success'}>{status}</el-tag>
          },
        },
        {
          prop: 'materialType',
          label: "物料类型",
          width: 140,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict('material_type_quo');
            return list.data.result;
          },
        },
        {
          prop: 'applyBy',
          label: "申请出库人",
          width: 140,
          showOverflowTooltip: true
        },

        {
          prop: 'applyTime',
          label: "申请出库时间",
          width: 160
        },

        {
          prop: 'approveBy',
          label: "出库人",
          width: 140,
          showOverflowTooltip: true
        },

        {
          prop: 'approveTime',
          label: "出库时间",
          width: 160
        },
        // {
        //   prop: 'outBy',
        //   label: "出库人",
        //   width: 160
        // },
        // {
        //   prop: 'outTime',
        //   label: "出库时间",
        //   width: 130
        // },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 160,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate}></ele-row-operation>
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    setSelectGoods(data) {
      // 调试完成记得删除控制台打印
      console.log("选中数据", data)
      this.loading = true
      mesTmMaterialOrderPickingBatchPc(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || "操作完成")
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    // 表格顶部按钮操作事件
    handleOperateEvent({ handleName, name, rows }) {
      this.title = name
      const fnc = {
        // add: () => {
        //   this.formDataDialog = {}
        //   this.goodsDialogVisible = true
        // },
      }
      fnc[handleName] && fnc[handleName]()
    },
    viewPic(url) {
      if(url)
      {
        this.imgUrlList = url.split(",");
        this.dialogVisible = true;
      }
      else
      {
        this.$message.warning("所选数据没有保存图片")
      }
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        showPhoto: () => {
          this.viewPic(row.outPhotoUrl)
        },
        edit: () => {
          if (row.outState!=="0")
          {
            this.$message.warning("不可重复确认")
            return
          }
          this.$confirm(
            "该操作无法撤回，请确实是否出库",
            $i18n.t("common.tip"),
            {
              confirmButtonText: $i18n.t("common.ok"),
              cancelButtonText: $i18n.t("common.cancel"),
              type: "warning",
            }
          ).then(() => {
            agreeOut(row).then((res)=>{
              this.$message.success( $i18n.t('common.editSuccess'))
              this.$refs.eleTable.refresh()
            })
          });
        }
      }
      fnc[handleName] && fnc[handleName]()
    },

  }
}
</script>
